<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 头部 -->
      <el-row class="card-head-row">
        <el-col :span="8">
          <div class="grid-content bg-purple-dark"></div>
          <el-input placeholder="请输入查找的姓名" v-model="pageParams.name">
            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button v-permission="'user:edit'" type="primary" @click="showAddUserDialog">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="userData" stripe border>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="admin" label="身份">
          <template slot-scope="adminscope">
            <el-tag v-if="adminscope.row.permissions === 2">管理员</el-tag>
            <el-tag v-else type="info">学生</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" min-width="150px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="deleUser">
            <el-tooltip v-permission="'user:edit'" content="修改用户" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" size="mini" circle
                @click="editUser(deleUser.row)"></el-button>
            </el-tooltip>
            <el-tooltip v-permission="'user:dele'" content="删除用户" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" size="mini" circle
                @click="deleteUser(deleUser.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageParams.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogAddVisible" width="500px">
      <el-form :model="addForm" status-icon :rules="addRules" ref="adduserForm" size="medium">
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="addForm.username" autocomplete="off"
            placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input prefix-icon="el-icon-s-cooperation" type="password" v-model="addForm.password" autocomplete="off"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="addForm.permissions" :label="1">学生</el-radio>
          <el-radio v-model="addForm.permissions" :label="2">管理员</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserClick">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改用户资料 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogUpVisible" width="500px">
      <el-form :model="upForm" status-icon :rules="addRules" ref="upuserForm" size="medium">
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="upForm.username" autocomplete="off"
            placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="upForm.name" autocomplete="off"
            placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input prefix-icon="el-icon-user-solid" type="password" v-model="upForm.password" autocomplete="off"
            placeholder="请输入修改的密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="upForm.permissions" :label="1">学生</el-radio>
          <el-radio v-model="upForm.permissions" :label="2">管理员</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpVisible = false">取 消</el-button>
        <el-button type="primary" @click="upUserClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import dayjs from 'dayjs'
import {
  getUserAll,
  findUsername,
  getRegist,
  deletUser,
  upUserinfo
} from '@/request'
export default {
  data () {
    return {
      total: 0,
      pageParams: {
        name: '', // 名称
        currentPage: 1, // 当前页数
        pageSize: 5
      },
      dialogAddVisible: false,
      dialogUpVisible: false,
      userData: [],
      searchName: '',
      addForm: { username: '', password: '', permissions: '0' },
      upForm: {},
      addRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 8, message: '姓名长度在2~8之间！', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 12, message: '密码长度在3~12之间！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getUserlist()
  },
  computed: {},
  methods: {
    handleSizeChange (num) {
      this.pageParams.pageSize = num
      this.getUserlist()
    },
    handleCurrentChange (curnum) {
      this.pageParams.currentPage = curnum
      this.getUserlist()
    },
    async getUserlist () {
      const data = await getUserAll(this.pageParams)
      if (data.code != 200) return this.$message.error(data.msg)
      this.total = data.data.total
      this.userData = data.data.records
      this.userData.forEach(item => {
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    async searchUser () {
      this.getUserlist()
    },
    showAddUserDialog () {
      this.dialogAddVisible = true
      this.addForm = { username: '', password: '', permissions: 1 }
    },
    addUserClick () {
      this.$refs.adduserForm.validate(async (valid) => {
        const data = await getRegist(this.addForm)
        if (data.code != 200) return this.$message.error(data.msg)

        this.$message.success(data.msg)
        this.$refs.adduserForm.resetFields()
        this.dialogAddVisible = false
        this.getUserlist()
      })
    },
    deleteUser (obj) {
      this.$confirm('你确定要删除用户：' + obj.username + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await deletUser({ id: obj.id })
          if (data.code != 200) return this.$message.error(data.msg)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getUserlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editUser (obj) {
      this.upForm = {
        id: obj.id,
        username: obj.username,
        password: obj.password,
        name: obj.name,
        permissions: obj.permissions
      }
      // console.log(this.upForm)

      this.dialogUpVisible = true
    },
    async upUserClick () {
      this.$refs.upuserForm.validate(async (valid) => {
        // if (!valid) return this.$message.error("请完善有效的注册信息！");
        const data = await upUserinfo(this.upForm)
        if (data.code != 200) this.$message.error(data.msg)
        this.$message.success(data.msg)
        this.dialogUpVisible = false
        this.$refs.upuserForm.resetFields()
        this.getUserlist()
      })
    }
  }
}
</script>

<style>
/* <div
  role="switch"
  aria-checked="true"
  class="el-switch is-checked is-disabled"
  > <input
  type="checkbox"
  name=""
  true-value="true"
  class="el-switch__input"
  > <!----
  > <span
  class="el-switch__core"
  style="width: 40px; border-color: rgb(19, 206, 102); background-color: rgb(19, 206, 102);"
  > </span
  > <!----
  > </div
  > .switchStyle */
</style>
